<template lang="pug">
  div(id="charts" style="height:100%;display:flex;flex-direction: column;")
    div(style="flex:1;")
      keep-alive
        kalix-chart(bizKey="fractionstatistic" title="分数段统计" v-bind:autoload="false"
          v-bind:chartTargetUrl="targetUrl" width="100%" height="600px"
          bizSearch="FractionstatisticSearch" v-on:searchAfter="searchAfter")
    div(style="flex:10%;background-color:#ffffff;")
      div(style="font-weight:bold;font-size:20px")
        p
          | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本次考试共计
          span(style="text-decoration: underline;") {{totalExaminee}}
          | 人，其中，优秀
          span(style="text-decoration: underline;") {{countData0}}
          | 人，占总人数的
          span(style="text-decoration: underline;") {{scaleDatas0}}
          | %,良好
          span(style="text-decoration: underline;") {{countData1}}
          | 人，占总人数的
          span(style="text-decoration: underline;") {{scaleDatas1}}
          | %,中等
          span(style="text-decoration: underline;") {{countData2}}
          | 人，占总人数的
          span(style="text-decoration: underline;") {{scaleDatas2}}
          | %,及格
          span(style="text-decoration: underline;") {{countData3}}
          | 人，占总人数的
          span(style="text-decoration: underline;") {{scaleDatas3}}
          | %,不及格
          span(style="text-decoration: underline;") {{countData4}}
          | 人，占总人数的
          span(style="text-decoration: underline;") {{scaleDatas4}}
          | %,平均分数
          span(style="text-decoration: underline;") {{avgScore}}.
</template>

<script type="text/ecmascript-6">
  import {FractionalStatisticURL} from '../config.toml'
  export default {
    name: 'kalix-exam-fractionstatistic',
    data() {
      return {
        targetUrl: FractionalStatisticURL,
        totalExaminee: '__',
        countData0: '__',
        countData1: '__',
        countData2: '__',
        countData3: '__',
        countData4: '__',
        scaleDatas0: '__',
        scaleDatas1: '__',
        scaleDatas2: '__',
        scaleDatas3: '__',
        scaleDatas4: '__',
        avgScore: '__'
      }
    },
    methods: {
      searchAfter(bizkey, resData) {
        if (bizkey === 'fractionstatistic') {
          this.totalExaminee = resData.totalExaminee
          let countDatas = resData.countDatas
          this.countData0 = countDatas[0]
          this.countData1 = countDatas[1]
          this.countData2 = countDatas[2]
          this.countData3 = countDatas[3]
          this.countData4 = countDatas[4]
          let scaleDatas = resData.scaleDatas
          this.scaleDatas0 = scaleDatas[0]
          this.scaleDatas1 = scaleDatas[1]
          this.scaleDatas2 = scaleDatas[2]
          this.scaleDatas3 = scaleDatas[3]
          this.scaleDatas4 = scaleDatas[4]
          this.avgScore = resData.avgScore
        }
      }
    }
  }
</script>

<style scoped>

</style>
